<template>
  <div class="financial_mod" :class="themeClass">
    <v-loading v-if="loading" />
    <v-nav :title="$t('Financial.Financial product')">
      <span @click="$router.push('/home/lockup/order')">{{ $t('Financial.Order') }}</span>
    </v-nav>
    <div class="financial_mod_box">
      <div class="financial_mod_box_funds_custody" :class="themeClass1">
        <div class="financial_mod_box_funds_custody_money">
          <p>{{ $t('Financial.Funds in custody') }} (USDT)</p>
          <h2>{{ haveFund.custody_funds }}</h2>
        </div>
        <div class="financial_mod_box_funds_custody_info">
          <div>
            <h3>{{ haveFund.today_earnings }}</h3>
            <p>{{ $t('Financial.Estimated earnings today') }}</p>
          </div>
          <div>
            <h3>{{ haveFund.earnings }}</h3>
            <p>{{ $t('Financial.Cumulative income') }}</p>
          </div>
          <div>
            <h3>{{ haveFund.have_order_count }}</h3>
            <p>{{ $t('Financial.Orders in Escrow') }}</p>
          </div>
        </div>
      </div>
      <div class="financial_mod_box_list">
        <div v-for="(item, index) in fundList" :key="index">
          <img :src="item.image" alt="" />
          <div class="list_data">
            <div class="list_data_desc">
              <h2>{{ item.name }}</h2>
              <van-button color="#DAAB51" size="small" @click="buyProduct(item.id)">{{ $t('Financial.Buy') }}</van-button>
            </div>
            <div class="list_data_Info">
              <div>
                <span>{{ $t('Financial.Single transaction limit') }}</span>
                <p>{{ item.buy_min + '~' + item.buy_max + ' USDT' }}</p>
              </div>
              <div>
                <span>{{ $t('Financial.Daily rate of return') }}</span>
                <p>{{ item.income_type == 0 ? item.daily_income + '%' : item.daily_income + ' USDT' }}</p>
              </div>
              <div>
                <span>{{ $t('Financial.cycle') }}</span>
                <p>{{ item.cycle }}({{ $t('Financial.day') }})</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <van-empty v-if="fundList == 0" :description="$t('info.info7')" />
    </div>
  </div>
</template>
<script>
export default {
  name: 'Financial',
  data() {
    return {
      haveFund: {},
      isDayTime: false,
      fundList: [],
      loading: false
    }
  },
  computed: {
    userInfo() {
      return JSON.parse(localStorage.getItem('userInfo'))
    },
    themeClass() {
      return this.isDayTime ? '' : 'darknight'
    },
    bgColor() {
      return this.isDayTime ? 'black' : 'white'
    },
    themeClass1() {
      return this.isDayTime ? '' : 'dark_li_color'
    }
  },
  watch: {
    '$store.state.nightMode': {
      handler(newVal) {
        this.isDayTime = newVal
      },
      immediate: true
    }
  },
  activated() {
    this.loading = true
    Promise.all([this.getMiningList(), this.gethaveFund()])
      .then(res => {
        this.loading = false
      })
      .catch(() => {
        this.loading = false
      })
  },
  methods: {
    buyProduct(id) {
      this.$router.push({
        path: '/home/lockup/product',
        query: {
          id: id
        }
      })
    },
    gethaveFund() {
      return this.$https.post('/coin/getMiningIncomeSituation').then(res => {
        if (res != undefined && res.code == 1) {
          this.haveFund = res.data
        }
      })
    },
    getMiningList() {
      return this.$https.post('/platform/getMiningList').then(res => {
        if (res != undefined && res.code == 1) {
          this.fundList = res.data
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
@import url('./index.less');
</style>
